import { useState, forwardRef } from 'react'
import './item.scss'

const Item = forwardRef((props, inputRef) => {
  const [HidIsShow, SetHidIsShow] = useState(false) // 左上角删除按钮显隐
  const { listInfo, removeComponent } = props // 解构父组件传入的列表数据 以及删除方法(vue3解构会失去响应式)
  const handleRemove = () => {
    // 删除按钮点击时 触发父组件方法过滤掉当前DOM
    removeComponent(listInfo.id)
  }
  const handleDragStart = event => {
    // 组件拖拽时设置唯一id
    event.dataTransfer.setData('Text', event.target.id)
  }
  return (
    <div
      className="Items"
      draggable="true"
      onDragStart={handleDragStart}
      ref={inputRef}
      id={listInfo.id}
    >
      <input type="text" onFocus={() => SetHidIsShow(true)} />
      {HidIsShow && (
        <button onClick={handleRemove} className="delete-btn">
          x
        </button>
      )}
    </div>
  )
})
export default Item
